<template>
  <el-table style="width: 100%;" tooltip-effect="dark" size="small" :data="data" v-loading="loading">
    <el-table-column type="selection" width="30" :selectable="onSelectable"></el-table-column>
    <el-table-column prop="name" label="名称" min-width="200" show-overflow-tooltip sortable>
     <template #default="scope">
       <div style="display: flex;align-items: center;font-size:16px">
         <el-icon v-if="scope.row.dirtype" style="color: #ffc402;font-size:35px;margin-right: 5px;"><component is="el-icon-folder"></component></el-icon>
         <el-icon v-else style="color: #ffc402;font-size:35px;margin-right: 5px;"><component is="el-icon-document"></component></el-icon>
         <span>{{ scope.row.realName }}</span>
       </div>
      </template> 
    </el-table-column>
    <el-table-column width="150">
      <template #default="scope">
        <div style="float: right; vertical-align: super" class="operation">
          <el-link v-for="item in rowButtons" :key="item.name" type="primary" :underline="false">
            <el-icon><component :is="item.icon"></component></el-icon>
          </el-link>

          <el-dropdown v-show="moreButtons && moreButtons.length > 0" trigger="click" @command="handleCommand">
            <el-link type="primary" class="el-dropdown-link" :underline="false">
              <el-icon><component is="el-icon-more"></component></el-icon>
            </el-link>
            <template #dropdown>
              <el-dropdown-menu >
              <el-dropdown-item v-for="item in moreButtons" :key="item.name" :command="{ action: item.action, row: scope.row }">
                {{ item.title }}
              </el-dropdown-item>
            </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template> 
    </el-table-column>
   <el-table-column prop="size" label="大小" width="180">
      <template #default="scope">
        <div v-if="scope.row.dirtype">-</div>
        <div v-else>{{ scope.row.size }}</div>
      </template>
    </el-table-column>
   <el-table-column prop="updated" label="最近更新" width="180">
      <template #default="scope">{{ scope.row.updateTime}}</template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  props:{
    data:{
      type:Array,
    },
    rowButtons:Array,
    moreButtons:Array

  },
  data() {
    return {
      
    };
  },
  methods: {
   
    onSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    onSelectable(row, index) {
      if (!row.dirtype) return true;
    },
    handleCommand(command) {
      command.action(command.row);
    },
    onScrollEnd() {
      this.$emit("scroll-end");
    },
  },
};
</script>

<style scoped>
.matter-icon {
  font-size: 35px;
}
.matter-title {
  display: inline;
  margin-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: -8px;
  position: relative;
}

.el-table__row .operation {
  display: none;
}
.el-table__row:hover .operation {
  display: block;
}

.el-table >>> .el-checkbox__inner {
  width: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.operation .el-link {
  font-size: 20px !important;
  margin: 0 2px;
}
</style>